<style>
    .box {
        margin: 0 auto;
        height: 250px;
        width: 200px;
        border: 1px solid #666;
        overflow: hidden;
        text-align: center;
    }

    .cover {
        width: 200px;
        height: 150px;
        background-color: skyblue;
        position: relative;
    }

    .cover::after {
        /* 居中布局 */
        position: absolute;
        content: '';
        left: 50%;
        top: 50%;



        background-image: url(../img/play-circle.png);
        background-size: contain;
        width: 40px;
        height: 40px;

        transition: all .5s;

        /* 居中可以使用 margin 也可以使用 translate */
        /* 放大 */
        /* margin-left: -20px;
        margin-top: -20px; 
        transform: scale(5); */
        transform: translate(-50%, -50%) scale(5);
        /* 透明 */
        opacity: 0;
    }

    .box:hover .cover::after {
        /* transform: scale(1); */
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
</style>

<div class="box">
    <div class="cover"></div>

    <p>欲把西湖比西子</p>
    <p>淡妆浓抹总相宜</p>
</div>